<!DOCTYPE html>
<html>
<head>
    <title>打卡文章信息表</title>
    <#include "/header.html">
</head>
<body>
<style>
    th {
        text-align: center;
    }
</style>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <div class="grid-btn">
            <!--            <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>-->
            <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
            <!--            <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>-->
        </div>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>

    <div v-show="!showList" class="panel panel-default">
        <div class="panel-heading">{{title}}</div>
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-sm-2 control-label">标题</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bPunchClockArticleInfo.clockArticleTitle"
                           placeholder="打卡文章名称"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">顶图</div>
                <div class="col-sm-10">
                    <img :src="bPunchClockArticleInfo.clockArticleImgUrl" alt="打卡文章图片URL" id="clockArticleImgUrl"
                         style="width: 150px; max-height: 150px">
                    <input type="file" accept="image/png,image/jpg,image/jpeg" class="form-control" value="选择顶图"
                           placeholder="顶图" onchange="insertImg(this, 'clockArticleImgUrl')"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">缩略图</div>
                <div class="col-sm-10">
                    <img :src="bPunchClockArticleInfo.clockArticleThumbnailUrl" alt="打卡文章缩略图"
                         id="clockArticleThumbnailUrl"
                         style="width: 100px; max-height: 100px">
                    <input type="file" accept="image/png,image/jpg,image/jpeg" class="form-control" value="选择缩略图"
                           placeholder="缩略图" onchange="insertImg(this, 'clockArticleThumbnailUrl')"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">音频</div>
                <div class="col-sm-10">
                    <audio :src="bPunchClockArticleInfo.clockArticleAudioUrl" controls="controls"
                           id="clockArticleAudioUrl"
                           style="display: inline" alt="打卡文章音频URL">
                        您的浏览器不支持 audio 标签。
                    </audio>
                    <input type="file" accept=".mp3, .mkv, .wma," class="form-control" value="选择音频"
                           placeholder="音频地址" onchange="insertImg(this, 'clockArticleAudioUrl')"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">内容</div>
                <div class="col-sm-10">
                    <textarea class="form-control" v-model="bPunchClockArticleInfo.clockArticleContent"
                              placeholder="打卡文章内容" rows="4"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">概述</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bPunchClockArticleInfo.clockArticleDesc"
                           placeholder="打卡文章概述"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">类型</div>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" name="clockArticleTimeType" value="1"
                               v-model="bPunchClockArticleInfo.clockArticleTimeType"/> 早安打卡
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="clockArticleTimeType" value="2"
                               v-model="bPunchClockArticleInfo.clockArticleTimeType"/> 晚安打卡
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">状态</div>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" name="clockArticleStatus" value="0"
                               v-model="bPunchClockArticleInfo.clockArticleStatus"/> 删除
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="clockArticleStatus" value="1"
                               v-model="bPunchClockArticleInfo.clockArticleStatus"/> 正常
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">所属时间</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bPunchClockArticleInfo.clockArticleTime"
                           placeholder="打卡文章所属时间"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">创建时间</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bPunchClockArticleInfo.createTime"
                           placeholder="创建时间"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">修改时间</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bPunchClockArticleInfo.modifyTime"
                           placeholder="修改时间"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
                &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
            </div>
        </form>
    </div>
</div>
<!-- layer.js 弹窗内容 -->
<div id="layerDetail" style="display: none">
    <table id="jqGridDetail"></table>
    <div id="jqGridPagerDetail"></div>
</div>

<script src="${request.contextPath}/statics/js/modules/sys/bpunchclockarticleinfo.js?_${.now?long}"></script>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.0.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
    function insertImg(e, pathname) {
        let files = e.files;
        let length = files.length;
        upload(files[0], pathname);
    }

    function upload(file, pathname) {
        console.log(file);
        console.log(pathname);
        let client = new window.OSS({
            region: 'oss-cn-shenzhen', // 你的oss地址，hangzhou，shanghai，shenzhen
            accessKeyId: 'LTAI4Fh7PnYLw3uQvoUYiazS', //你的ak
            accessKeySecret: 'cEw7e8QMz0h4XY4qmzCoTzhHITqyUU', //你的secret
            //stsToken: '<Your securityToken(STS)>',//这里我暂时没用，注释掉
            bucket: 'zktuistatic', //你的oss名字
        });

        // 组装文件名
        let date = new Date();
        let yeaer = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        let datePath = yeaer + "" + month + "" + day;
        let key = "";
        // 实体名 + 文件名 + 日期 + 6位随机数
        // ge:/bPunchClockArticleInfo/clockArticleImgUrl/20210120/417673.png
        key += "/bPunchClockArticleInfo/" + pathname + "/" + datePath + "/" + String(parseInt(Math.random() * 10000000, 10) + getFileExtendingName(
            file.name));

        client.put(key, file).then(function () {
            return client.get(key);
        }).then(function (ret) {
            console.log(ret.res.requestUrls[0]);
            let reqUrl = ret.res.requestUrls[0].replace("http://zktuistatic.oss-cn-shenzhen.aliyuncs.com/", "http://zktfile.wxslzf.com/");
            console.log(pathname);
            // 顶图
            if (pathname == "clockArticleImgUrl") {
                vm.bPunchClockArticleInfo.clockArticleImgUrl = reqUrl;
                document.getElementById('clockArticleImgUrl').src = vm.bPunchClockArticleInfo.clockArticleImgUrl;
            }

            // 缩略图
            if (pathname == "clockArticleThumbnailUrl") {
                vm.bPunchClockArticleInfo.clockArticleThumbnailUrl = reqUrl;
                document.getElementById('clockArticleThumbnailUrl').src = vm.bPunchClockArticleInfo.clockArticleThumbnailUrl;
            }

            // 音频
            if (pathname == "clockArticleAudioUrl") {
                vm.bPunchClockArticleInfo.clockArticleAudioUrl = reqUrl;
                document.getElementById('clockArticleAudioUrl').src = vm.bPunchClockArticleInfo.clockArticleAudioUrl;
            }
        }).catch(function (err) {
            console.log(err);
        });
    }

    function getFileExtendingName(filename) {
        // 文件扩展名匹配正则
        var reg = /\.[^\.]+$/;
        var matches = reg.exec(filename);
        if (matches) {
            return matches[0];
        }
        return '';
    }
</script>
</body>
</html>
